<template>
  <div class="app-container">
    
    <el-breadcrumb separator="/">
        <el-breadcrumb-item class="active" >
            <span @click="changeBread(null,-1);search(0)">查看一级分类</span>
        </el-breadcrumb-item>                                                                                                                                                                                                                                                                                    
        <el-breadcrumb-item v-for="(item,index) in breadArr" :key="index">
            <span @click="changeBread(item,index);search(item.cid)">{{item.name}}</span>
        </el-breadcrumb-item>
       
     </el-breadcrumb>
    
    <br/>
      <el-button type="success" icon="el-icon-plus" @click="dialogFormVisible=true;">添加类目</el-button>


    <el-table :data="catList" style="width: 100%" ref="brandTable">
      <el-table-column type="selection"> </el-table-column>

      <el-table-column prop="cid" label="分类ID" />
      <el-table-column prop="name" label="类目名称" width="200" />
      <el-table-column prop="mid" label="模板ID" />
      <el-table-column prop="mname" label="模板名称" />
      <el-table-column prop="brands" label="模板关联品牌" >
            <template slot-scope="scope">

                  <div>{{scope.row.brands|jsonFormat('name')}}</div>

            </template>

      </el-table-column>
      <el-table-column prop="spec" label="模板关联规格" >

                <template slot-scope="scope">

                  <div>{{scope.row.spec|jsonFormat('specName')}}</div>

            </template>


      </el-table-column>
      <el-table-column label="操作"  width="300">
        <template slot-scope="scope">
          <!-- 自定义展示 -->
          <div>
            <el-button v-if="breadArr.length < 2" size="mini" type="primary"  @click="lookNext(scope.row);search(scope.row.cid)">查看下级分类</el-button>
            <el-button
              type="primary"
                size="mini"
              icon="el-icon-edit"
              >修改</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

     <br />

    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="searchMap.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

<!-- 添加类目dialog -->
    <el-dialog title="类目编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        
          
        <el-form :model="entity"  ref="brandForm">
           
            <el-form-item label="父类目">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item class="active" >
                        <span >一级分类</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-for="(item,index) in breadArr" :key="index">
                        <span>{{item.name}}</span>
                    </el-breadcrumb-item>
                  
                </el-breadcrumb>
            </el-form-item>

            <el-form-item label="类目名称"  prop="name" label-width="100px">
            <el-input v-model="entity.name" ></el-input>
            </el-form-item>
             <el-form-item label="选择模板" label-width="100px">
                  <el-select v-model="entity.templateId" placeholder="请选择">
                    <el-option
                      v-for="item in tmpls"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
            </el-form-item>
           
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
import {findByParentId,findAllTemp,addCat} from "../api/cat"
export default {
  data() {
    return {

        catList:[],
        searchMap:{
             page:1,
             size:5,
             where:{
                 parentId: 0
             }    //data就是parent_id  ,默认查一级商品分类
        },
        total:0 ,//总记录数   
        breadArr:[], //面包屑数组
        dialogFormVisible:false,
        entity:{parentId:0}, //要保存的商品分类
        tmpls:[], // 模板列表
        total: 0,
        

    };
  },
  methods:{
      //分页查询
    search(id){
      if(id != null){
        this.searchMap.where.parentId = id;
      }
      findByParentId(this.searchMap).then(res =>{
        if(res.success){
            this.catList = res.data;
            this.total = res.total;
        }
    })
    },
    //查询所有模板信息
    findAllTemp(){
      findAllTemp().then(res =>{
        this.tmpls = res
      })
    },
    //保存分类
    save(){
      if(this.breadArr.length == 0){
        this.entity.parentId = 0;
      }else{
        this.entity.parentId = this.breadArr[this.breadArr.length-1].cid;
      }
      console.log(this.entity);
      addCat(this.entity).then(res =>{
        if(res.success){
          this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success'
          });
          this.dialogFormVisible = false;
          this.search();
        }else{
          this.$notify({
          title: '保存失败',
          message: res.msg,
          type: 'error'
          });
        }
      });

      this.search();
    },
    //查看下一级
    lookNext(item){
      // console.log(item);
        this.breadArr.push(item);
    },
    // 点击面包屑
    changeBread(item,index){
      if(index == -1){
        this.breadArr = [];
      }else if(index == 0){
        this.breadArr.splice(1,1);
      }else{
        
      }
    },
         //size变化的时候触发
    handleSizeChange(size) {
        this.searchMap.size = size;
        this.search();
    },
    //当前页发生变化的时候触发
    handleCurrentChange(page) {
        this.searchMap.page = page;
        this.search();
    },
    
  },
  created(){
     this.search();
     this.findAllTemp();
  },
  filters:{
      jsonFormat(source,key){//定义过滤器
          //[{id:1,name:'小米'},{id:2,name:'华为'}]
        //   console.log(source);
        //  if(!source){
        //       return "--"
        //  }else{

        //      //将json串转换成json对象
        //      var object = eval(source);
        //      var arr = []
        //      object.forEach(item=>{
        //           arr.push(item[key]); //item['name']   ===    item.name
        //      })

        //      //拼接
        //      return arr.join(",")


        //  }
        // console.log(source);
        // console.log(key);
        if(source != null){
            var objArr =  JSON.parse(source);
            var names = [];
            objArr.forEach(obj => {
                names.push(obj[key])
            });

            var namesStr = names.join(",")

            return namesStr;
        }else{
            return "--"
        }

      } 
  }
};
</script>

<style lang="scss">

</style>